<template>
  <el-card shadow="never" class="border-none mt-6">
    <template #header>
      <span>产品</span>
    </template>
    <div class="products-box">
      <div class="products-list" ref="productsListDiv" style="min-height: 500px">
        <div class="product-item" v-for="item in productListDto" :key="item.bsId">
          <div class="product-item-img">
            <div class="img-slide-wrap">
              <el-image class="img cursor-pointer" :src="item.mainImageUrl" :fit="'cover'"  @click="onToProductDetail(item)"/>
              <div class="img-slide">
                <div class="img-slide-left" :class="item.left" @click="switchProductImageLeft(item)">
                  <el-icon><ArrowLeftBold /></el-icon>
                </div>
                <div class="img-wrap">
                  <div class="img-box" :style="{ transform: 'translateX(' + item.position + 'px)' }" style="gap: 6px">
                    <el-image
                      class="img"
                      :class="{ 'img-active': index === item.imgActiveIndex }"
                      :src="itemImg"
                      :fit="'cover'"
                      v-for="(itemImg, index) in item.imageUrls"
                      :key="index"
                      @click="switchProductImageActive(item, index)"
                    />
                  </div>
                </div>
                <div class="img-slide-right" :class="item.right" @click="switchProductImageRight(item)">
                  <el-icon><ArrowRightBold /></el-icon>
                </div>
              </div>
            </div>
          </div>
          <div class="product-name">{{ item.title }}</div>
          <div class="product-info"  @click="onToProductDetail(item)" >
            <p><span>价格：</span><fixed-amount class="price" :value="item.price" :symbol="item.symbol"></fixed-amount></p>
            <p>
              <span>ASIN：</span>
              <span>
                <span v-text="item.code"></span>
                <a class="ml-1 align-middle" :href="item.url" target="_blank"><iconpark-icon name="amazon"></iconpark-icon></a>
              </span>
            </p>
            <p>
              <el-tooltip effect="dark" content="该listing有图文(图文介绍)" placement="top">
                <el-tag color="#e62d06" v-if="item.aplus">A+</el-tag>
              </el-tooltip>
              <el-tooltip effect="dark" content="该Listing有Amazon's Choice标识" placement="top">
                <el-tag color="#1e2334" v-if="item.ac">AC</el-tag>
              </el-tooltip>
            </p>
          </div>
        </div>
      </div>
      <table-pagination :layout="'total, prev, pager, next, jumper'" :pagination="productPagination" @change="onPaginationChange" />
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import { getSellerProduct } from '@/api/common'
import { onMounted, ref, watch } from 'vue'
import FixedAmount from '@/plugins/pair/fixed-amount.vue'
import TablePagination from '@/plugins/pair/table-pagination.vue'
import router from "@/router";
const productListDto = ref<any>([])
const props = defineProps({
  sellerId: {
    type: String,
    default: '',
  },
})
const productsListDiv = ref<HTMLDivElement | null>(null)

const productReqDto = {
  pageNo: 1,
  pageSize: 10,
}
const productPagination = ref({
  total: 0,
  pageNo: 1,
  pageSize: 10,
})
const onPaginationChange = (pageNo: number, pageSize: number) => {
  productReqDto.pageNo = pageNo
  productReqDto.pageSize = pageSize
  reqSellerProduct()
}
const reqSellerProduct = () => {
  if(props.sellerId) {
    if (productsListDiv.value) {
      const width = productsListDiv.value.offsetWidth
      productReqDto.pageSize = ~~((width - (width / 214) * 30) / 214) * 2
    }
    getSellerProduct(props.sellerId, productReqDto).then((res) => {
      res.data.content.forEach((item: any) => {
        item.position = 0
        item.imgActiveIndex = 0
        item.left = ''
        item.right = item.imgUrl.length > 3 ? 'active' : ''
        item.mainImageUrl = mainImageUrlSwitch(item.imgUrl)
      })
      productListDto.value = res.data.content
      productPagination.value = res.data
    })
  }
}
const mainImageUrlSwitch = (src: string) => {
  if (src && src.includes('UL120')) {
    return src.replace('UL120', 'UL800')
  }
  return src
}
const switchProductImageLeft = (item: any) => {
  if (!item.left && item.position >= 0) {
    return
  }
  item.right = 'active'
  item.position = item.position + 55
  item.imgActiveIndex--
  switchProductImageActive(item, item.imgActiveIndex)
}
const switchProductImageRight = (item: any) => {
  if (!item.right) {
    return
  }
  item.left = 'active'
  item.position = item.position - 55
  item.imgActiveIndex++
  switchProductImageActive(item, item.imgActiveIndex)
}
const switchProductImageActive = (item: any, index: number) => {
  if (index === 0) {
    item.left = ''
  }
  if (index === item.imageUrls.length - 1) {
    item.right = ''
  }
  item.imgActiveIndex = index
  item.mainImageUrl = mainImageUrlSwitch(item.imageUrls[index])
}

const onToProductDetail = (item: any) => {
  router.push({ name: 'product-detail', query: { id: item.bsId } })
}
watch(
  () => props.sellerId,
  () => {
    reqSellerProduct()
  }
)

onMounted(() => {
  reqSellerProduct()
})
</script>
<style scoped lang="scss">
.products-list {
  display: flex;
  flex-wrap: wrap;
}

</style>
